<template>
    <el-drawer v-model="showDialog" :title="popTitle" direction="rtl" :before-close="handleClose" class="content-detail-drawer">
        <div>
                <el-table :data="rewardRuleTable.data" size="large" ref="rewardRuleTableRef" v-loading="rewardRuleTable.loading">
                    <template #empty>
                        <span>{{ !rewardRuleTable.loading ? t('emptyData') : '' }}</span>
                    </template>
                    <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="member.nickname" label="会员名称" width="120" />
                <el-table-column prop="member.mobile" label="手机号" width="120" />
                <el-table-column prop="point" label="积分" width="100" />
                <el-table-column prop="balance" label="余额" width="100" />
                <el-table-column label="优惠券" min-width="200">
                    <template #default="{ row }">
                        <div v-if="row.coupon_json && row.coupon_json.length">
                            <div v-for="(coupon, index) in row.coupon_json" :key="index" class="mb-2">
                                {{ coupon.title }} x {{ coupon.num }}
                            </div>
                        </div>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="发放时间" width="180" />
                </el-table>
                <div class="mt-[16px] flex justify-end">
                    <el-pagination v-model:current-page="rewardRuleTable.page" v-model:page-size="rewardRuleTable.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="rewardRuleTable.total"
                        @size-change="loadrewardRuleList()" @current-change="loadrewardRuleList" />
                </div>
            </div>
    </el-drawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'

// 使用正确的API函数
import { getRewardRuleReward } from '@/addon/sow_community/api/reward_rule'
import { img, setTablePageStorage, getTablePageStorage } from '@/utils/common'
import { cloneDeep } from 'lodash-es'
const popTitle: string = '发放记录'
import { t } from '@/lang'
 const showDialog = ref(false)
 
const rewardRuleTable = reactive<any>({
    page: 1,
    limit: 10,
    total: 0,
    loading: true,
    data: [],
    searchParam: {
       id:''
    }
})

// 分页相关
 
 const rewardRuleId = ref<number | null>(null)

const handleClose = () => {
    showDialog.value = false
}

const loadrewardRuleList = (page: number = 1) => {
    rewardRuleTable.loading = true
    rewardRuleTable.page = page

    const searchData = cloneDeep(rewardRuleTable.searchParam)
    getRewardRuleReward({
        page: rewardRuleTable.page,
        limit: rewardRuleTable.limit,
        ...rewardRuleTable.searchParam
    }).then((res: any) => {
        rewardRuleTable.loading = false
        rewardRuleTable.data = res.data.data
        rewardRuleTable.total = res.data.total
        setTablePageStorage(rewardRuleTable.page, rewardRuleTable.limit, searchData)
    }).catch(() => {
        rewardRuleTable.loading = false
    })
}

const setFormData = async (row: any = null) => {
    showDialog.value = true
    rewardRuleId.value = row?.id || null
    if (rewardRuleId.value) {
        rewardRuleTable.searchParam.id = rewardRuleId.value
        loadrewardRuleList(getTablePageStorage(rewardRuleTable.searchParam).page)
    }
}

defineExpose({
    showDialog,
    setFormData
})
</script>

<style lang="scss" scoped>
.content-detail-drawer{
    width: 1000px !important;
}
</style>
